<template>
  <h1>My Todo</h1>
  <div class="task-label">
    <label for="task-label">Task Label: </label>
    <input type="text" name="task-label" v-model="editingEvent.value" />
  </div>
  <div class="task-type">
    <label for="task-type-list">Task Type: </label>
    <select id="task-type-list" v-model="editingEvent.type">
      <option value="personal">personal</option>
      <option value="working">working</option>
      <option value="unknown">unknown</option>
    </select>
  </div>
  <div class="add-task">
    <button @click="handleAddTodoEvent">Add Task</button>
  </div>
  <h1 class="task-list">Task List</h1>
  <div class="task-filter">
    <button @click="setFilterState('All')">All</button> |
    <button @click="setFilterState('Incomplete')">Incomplete</button> |
    <button @click="setFilterState('Complete')">Complete</button>
    <ul class="filter-list">
      <li
        v-for="event in filterEventList"
        class="filter-content"
        :key="event.value"
      >
        <input v-model="event.isComplete" type="checkbox" name="content" />
        <label for="content">{{
          `Event: ${event.value}, Type: ${event.type}`
        }}</label>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
/* eslint-disable */
import { computed, defineComponent, reactive, Ref, ref, unref } from 'vue';
// Todo事务种类
type TodoEventType = 'personal' | 'working' | 'unknown';
// Todo事务类型
interface TodoEvent {
  value: string;
  isComplete: boolean;
  type: TodoEventType;
}
// 过滤种类
type FilterTypes = 'All' | 'Incomplete' | 'Complete';
// 过滤规则哈希表
type FilterRuleMap = {
  [K in FilterTypes]: (e: TodoEvent) => boolean;
};
/* eslint-disable */
export default defineComponent({
  setup() {
    const editingEvent: TodoEvent = reactive<TodoEvent>({
      // 初始化编辑事务
      value: '',
      isComplete: false,
      type: 'personal',
    }); // 正在编辑事务
    const todoEventList: Ref<TodoEvent[]> = ref([]); // 事务列表
    const filterState: Ref<FilterTypes> = ref('All'); // 事务状态种类
    const setFilterState = (value: FilterTypes) => {
      filterState.value = value;
    };
    const handleAddTodoEvent = () => {
      // 处理添加事务至列表
      const list = unref(todoEventList);
      list.push({
        value: editingEvent.value,
        isComplete: editingEvent.isComplete,
        type: editingEvent.type,
      });
      // 重置编辑事务
      editingEvent.value = '';
      editingEvent.isComplete = false;
      editingEvent.type = 'personal';
    };
    const filterRuleMap: FilterRuleMap = {
      // 过滤哈希表规则
      All: (e) => !!e,
      Incomplete: (e) => e.isComplete === false,
      Complete: (e) => e.isComplete === true,
    };
    const filterEventList = computed(() => {
      return unref(todoEventList).filter(filterRuleMap[unref(filterState)]);
    });
    return {
      editingEvent,
      todoEventList,
      handleAddTodoEvent,
      setFilterState,
      filterEventList,
    };
  },
});
</script>

<style scoped>
.task-label {
  padding-top: 30px;
}
.task-type {
  padding-top: 20px;
}
.add-task {
  padding-top: 20px;
}
.task-list{
  padding-top: 30px;
}
.task-filter {
  padding: 30px;
}
.filter-content{
  list-style: none;
}
</style>